<template>
  <div class="site-containner">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="9" :sm="8" :md="6" :lg="8" :xl="7">
        <span><router-link :to="{path:'/monitor/etl'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
        <span><img :src="realtimeindex" class="equiplist"/></span>
        <span class="description">ETL策略管理</span>
      </el-col>
    </el-row>
    <div class="app-container">
      <el-row>
        <el-col :span="24">
          <div class="outMores">
            <div class="dataTitles">
              新增策略
            </div>
          </div>
          <div class="addBody">
            <el-form :inline="true" class="demo-form-inline">
              <div class="textTitle">基本信息</div>
            </el-form>
            <el-form :inline="true" class="addMessage" ref="form" :model="addETL" label-width="95px">
              <el-form-item label="策略编号:">
                <el-input class="readonlyMessage smallMessage" v-model="addETL.data.strategy_id" readonly></el-input>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 24px; color: red;">*</span>
              <el-form-item class="rightMessage" label="策略名称:">
                <el-input class="smallMessage" v-model="addETL.data.name" placeholder="请输入策略名称"></el-input>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 10px; color: red;">*</span>
              <el-form-item label="适用对象:">
                <el-select class="smallMessage" v-model="addETL.data.equip_model" clearable filterable placeholder="请选择类型">
                  <el-option
                    v-for="item in condition.equip_model"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 24px; color: red;">*</span>
              <el-form-item class="rightMessage" label="策略类型:">
                <el-select class="smallMessage" v-model="addETL.data.strategy_type" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in condition.strategy_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 10px; color: red;">*</span>
              <el-form-item label="计算频率:">
                <el-select class="smallMessage" v-model="addETL.data.compute_cycle" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in condition.compute_cycle"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 24px; color: red;">*</span>
              <el-form-item class="rightMessage" label="生效时间:">
                <el-date-picker
                  v-model="addETL.data.valid_start_time"
                  type="datetime"
                  class="smallMessage"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 10px; color: red;">*</span>
              <el-form-item label="计算类型:" class="saveWidth">
                <el-select class="smallMessage" v-model="addETL.data.data_type" clearable filterable placeholder="请选择类型">
                  <el-option
                    v-for="item in condition.data_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 10px; color: red;" v-if="addETL.data.data_type === 'digit'">*</span>
              <el-form-item label="计算条件:" class="saveWidth" v-if="addETL.data.data_type === 'digit'">
                <el-select class="smallMessage" v-model="addETL.data.digit_type" clearable filterable placeholder="请选择计算条件">
                  <el-option
                    v-for="item in condition.digit_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select class="smallMessage" style="width: 376px;" v-model="addETL.data.digit_val" clearable filterable placeholder="请选择计算模式">
                  <el-option
                    v-for="item in condition.digit_val"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <span style="position: absolute; margin: 15px 0px 0px 10px; color: red;" v-if="addETL.data.data_type === 'analog' || addETL.data.data_type === ''">*</span>
              <el-form-item label="计算条件:" class="saveWidth" v-if="addETL.data.data_type === 'analog' || addETL.data.data_type === ''">
                <el-select class="smallMessage" v-model="addETL.data.analog_type" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in condition.analog_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input v-if="addETL.data.analog_type === '3' || addETL.data.analog_type === '4' || addETL.data.analog_type === '5' || addETL.data.analog_type === '6' || addETL.data.analog_type === '7'" style="width: 376px;" v-model="addETL.data.analog_val" placeholder="请填写条件值"></el-input>
                <el-input v-if="addETL.data.analog_type === '1'" style="width: 376px;" v-model="addETL.data.analog_val" placeholder="请填写偏移量"></el-input>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input class="coordinateMessage" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" v-model="addETL.data.remarks"></el-input>
              </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline">
              <div class="textTitle">测点列表<ETLdialog style="float: right;" v-bind:addETL="addETL" v-bind:ETLOid="ETLOid"v-on:ETLneed="ETLneed"></ETLdialog></div>
            </el-form>
            <el-table :data="ETLOid" stripe fit highlight-current-row max-height="325"
                      style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="55px"
              >
              </el-table-column>
              <el-table-column
                prop="fittings_type_label"
                label="机构"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="oid"
                label="测点编号"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="测点名称"
                min-width="210">
              </el-table-column>
              <el-table-column
                prop="type"
                label="测点类型"
                min-width="180">
              </el-table-column>
              <el-table-column
                label="操作"
                width="160">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index, ETLOid)" type="text" title="取消" size="small">
                    <i class="el-icon-circle-close-outline"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button type="primary" class="clear"><router-link :to="{path:'/monitor/etl'}">取消</router-link></el-button>
          <el-button class="indieWidth" type="primary" @click="addETLSave()">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import ETLdialog from './ETLdialog.vue'
  import ETLDelete from '@/assets/components/wraningDelete.png'
  import realtimeindex from '@/assets/home/management.png'
  import returnnormalpress from '@/assets/home/returnnormalpress.png'
  export default {
    name: 'AdminSite',
    components: {
      ETLdialog
    },
    data() {
      return {
        realtimeindex,
        returnnormalpress,
        ETLDelete,
        addMessage: {},
        ETLOid: [],
        options: [],
        condition: '',
        getAllBasicdata: {
          access_token: localStorage.getItem('access_token'),
          type: 'etl_get_basicdata'
        },
        addETL: {
          access_token: localStorage.getItem('access_token'),
          type: 'etl_add',
          data: {
            name: '',
            valid_start_time: '',
            remarks: '',
            equip_class: '',
            equip_model: '',
            strategy_type: '',
            compute_cycle: '',
            data_type: '',
            analog_type: '',
            analog_val: '',
            digit_type: '',
            digit_val: '',
            event_levels: [],
            oids: []
          }
        }
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      // 获取条件
      queryData() {
        axios.post('/etl', this.getAllBasicdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.condition = res.data
          this.condition.strategy_type[1] = {
            label: '事件',
            value: '2',
            disabled: true
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      ETLneed: function(templateRadio) {
        for (var x = 0; x < templateRadio.length; x++) {
          this.ETLOid.push(templateRadio[x])
        }
      },
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      addETLSave() {
        this.addETL.data.oids = []
        for (var i = 0; i < this.ETLOid.length; i++) {
          this.addETL.data.oids.push(this.ETLOid[i].oid)
        }
        axios.post('/etl', this.addETL, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(222)
          if (res.data.errcode === '00000') {
            this.$router.push({
              path: '/monitor/etl'
            })
          }
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            switch (error.data.errmsg) {
              case 'valid start time error':
                this.$message.error('请输入正确的生效时间')
                break
              case 'name format error':
                this.$message.error('请输入正确的策略名称且长度小于40')
                break
              case 'equip model error':
                this.$message.error('请选择适用对象')
                break
              case 'compute cycle error':
                this.$message.error('请选择计算频率')
                break
              case 'oids not empty':
                this.$message.error('请添加相关测点')
                break
              case 'strategy type error':
                this.$message.error('请选择策略类型')
                break
              case 'data type error':
                this.$message.error('请选择计算类型')
                break
              case 'digit type error':
                this.$message.error('请选择计算条件及计算模式')
                break
              case 'analog type error':
                this.$message.error('请选择计算条件')
                break
              case 'analog val':
                this.$message.error('请选择条件值')
                break
              case "Error 1406: Data too long for column 'name' at row 1":
                this.$message.error('策略名称字段仅限输入40个字符')
                break
              case "Error 1406: Data too long for column 'remarks' at row 1":
                this.$message.error('备注仅限输入255个字符')
                break
            }
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .site-containner{
    font-size: 16px;
    color: #25B6C7;
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 55px;
      padding-left: 20px;
      .description{
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }
      .returnnormalpress{
        vertical-align: middle;
      }
      .equiplist{
        vertical-align: middle;
        margin-left: 10px;
      }
      .searchinvalid{
        vertical-align: middle;
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent{
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-top: 0px;
          color:rgba(51,51,51,1);
        }
        .seachtitle{
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
      }
    }
  }
  .outMores{
    height: 40px;
    padding-top: 5px;
  }
  .dataTitles {
    height: 16px;
    font-size: 16px;
    color: #323842;
  }
  .returnIndex {
    float: right;
    font-size: 14px;
    color: #25B6C7;
    cursor: pointer;
  }
  .addBody{
    width: 100%;
    min-height: 500px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #E0E0E0;
  }
  /deep/ .addMessage {
    margin: 20px 0px;
    width: 745px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .smallMessage {
    width: 256px;
    height: 30px!important;
  }
  /deep/ .VsmallMessage {
    width: 126px;
  }
  /deep/ .bigMessage {
    width: 500px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .cityMessage {
    width: 624px;
  }
  /deep/ .coordinateMessage {
    width: 636px;
  }
  /deep/ .coordinateMessage > .el-textarea__inner {
    resize: none;
    padding: 5px 14px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .delete {
    display: inline;
    margin-left: 5px;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 20px;
  }
  /deep/ .el-table--border {
    margin: 20px 0px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
  }
  /deep/ .el-table th {
    padding: 4px 0px;
  }
  /deep/ .el-table td {
    padding: 3px 0px;
    font-weight: normal;
  }
  /deep/ .saveWidth {
    width: 735px;
  }
  /deep/ .gutter {
    background: #F7F8F9;
  }
</style>
